<template>
    <li v-if="model.type != 3">
        <div class="node-info">
            <div v-if="isFolder" v-on:click="collapse_expand">
                <img v-if="model.open" src="../../assets/collapse.png"/>
                <img v-else src="../../assets/expand.png"/>
            </div>
            <span>&nbsp;</span>
            <img v-if="model.type === 1" src="../../assets/folder.png"/>
            <img v-else-if="model.type === 2" src="../../assets/module.png"/>
            <img v-else src="../../assets/link.png"/>
            <span>{{model.key}}</span>
        </div>
        <ul v-if="model.open">
            <Node v-for="model in model.children" :model="model" :key="model.id"></Node>
        </ul>
    </li>
</template>

<script>
    export default {
        name: 'Node',
        props: {
            model: Object
        },
        computed: {
            isFolder: function(){
                var cnt = 0;
                if(this.model.children && this.model.children.length){
                    for(var i = 0, len = this.model.children.length; i < len; i++){
                        if(this.model.children[i].type != 3){
                            cnt ++;
                        }
                    }
                }
                return Boolean(cnt);
            }
        },
        methods: {
            collapse_expand: function(){
                if(this.isFolder){
                    this.model.open = !Boolean(this.model.open);
                }
            }
        }
    }
</script>

<style scoped>

    ul {
        list-style-type: none;
    }
    .node-info {
        height: 24px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        cursor: pointer;
    }

    .node-info img {
        width: 14px;
        height: 14px;
    }

    .node-info span {
        font-size: 14px;
        text-indent: 4px;
    }
</style>
